<template>
    <el-container>
        <!--左侧边栏-->
        <el-aside width="25%">
            <!--头像组件-->
            <Avatar></Avatar>
            <!--我的信息组件-->
            <my-info></my-info>
        </el-aside>
        <!--内容区域-->
        <el-container>
            <!--头部-->
            <el-header>
                <Header></Header>
            </el-header>
            <!--博客展示卡部分-->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Avatar from "components/common/Avatar";
    import MyInfo from "components/index/MyInfo";
    import BlogList from "components/index/BlogTab";
    import Header from "components/index/Header";
    import UpBut from "components/common/UpBut";
    import MoreBlog from "components/common/MoreBlog";

    export default {
        components: {UpBut, Header, BlogList, MyInfo, Avatar, MoreBlog},

        data() {
            return {

            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #ebecee;
        color: #333;
        text-align: center;
        width: 75%;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .el-aside {
        position: fixed;
        background-color:#979ea2;
        /*background-image: url("../../assets/img/cool-background (2).png");*/
        color: #333;
        text-align: center;
        height: 100%;
    }

    .el-main {
        background-color: #ebecee;
        position: absolute;
        width: 75%;
        top: 60px;
        right: 0px;
    }
</style>